<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>箭头函数实践</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: #58a;
        }
    </style>
</head>
<body>
    <div id="ad"></div>
    <script>
        //需求-1  点击 div 2s 后颜色变成「粉色」

        // 1. 获取元素
        // 2. 绑定事件
        // 3. 设置定时器
        // 4. 改变背景色
        let div = document.querySelector('#ad');
        
        div.onclick = function(){
            // setTimeout this指向div有几种方式
            // 1. 缓存 
            //let that = this; // _this = this;
            // 2. bind 
            // setTimeout(function(){
            //     this.style.backgroundColor = 'hotpink';
            // }.bind(this),2000);
            // 3. 箭头函数
            setTimeout(()=>{
                this.style.backgroundColor = 'hotpink';
            },2000);
        }
 
        //需求-2  从数组中返回偶数的元素
        let arr = [2,3,4,6,75,54,7,5,4,7,8,9,4,9,0];

        let newArr = arr.filter(item=>{
            // 模
            return item % 2 === 0;
        });
        console.log(newArr);

        // 箭头函数应用场景
        // 1. 定时器：
        // 2. 数组方法中的回调：不涉及操作this
        // 不适合箭头函数的
        // 对象中的方法，一般不适合定义成箭头函数。
        
        let obj = {
            name1:'atguigu',
            say:()=>{
                console.log(this);
                console.log(this.name1);
            }
        }
        obj.say();

    </script>
</body>

</html>